<template>
  <div class="blogEdit_box">
    <el-page-header @back="goBack" content="主页"> </el-page-header>

    <el-form ref="form" :model="articleInfo" label-width="40px">
      <el-form-item label="标题">
        <el-input v-model="articleInfo.title"></el-input>
      </el-form-item>

      <el-form-item label="分类">
        <el-select v-model="articleInfo.categories" placeholder="请选择">
          <el-option
            v-for="(item, index) in classList"
            :key="index"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="摘要">
        <el-input
          type="textarea"
          rows="3"
          v-model="articleInfo.smallText"
        ></el-input>
      </el-form-item>

      <el-form-item label="内容">
        <mavon-editor class="content_edit" v-model="articleInfo.content">
        </mavon-editor>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="editArticle">
          <span v-if="isBuild">立即创建</span>
          <span v-else>保存修改</span>
        </el-button>
        <el-button @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 文章详情信息
      articleInfo: {},
      // 判断是否新建
      isBuild: '',
      // // 编辑文章表单
      editArticleFrom: {
        id: '',
        title: '',
        content: '',
        smallText: '',
        categories: '',
        oldCategories: '',
        tags: ''
      },
      // 分类列表
      classList: []
    }
  },
  methods: {
    // 根据 id 获取文章
    async getArticle (articleId) {
      console.log('获取文章' + articleId)

      const { data: res } = await this.$http.get(`/article/get/${articleId}`)
      console.log(res)
      if (res.code !== 200) return this.$message.error('获取文章详情失败！')
      this.articleInfo = res.data.article
      console.log(this.articleInfo)

      // 因为后端需要根据旧分类查询 T-T
      this.editArticleFrom.oldCategories = this.articleInfo.categories
      // console.log('T_T')
      // console.log(this.editArticleFrom.oldCategories)
    },
    // 新建文章、编辑文章
    async editArticle () {
      if (this.isBuild) {
        // 新建文章
        const { data: res } = await this.$http.post('/article/insert', this.articleInfo)
        console.log('新建文章')
        console.log(res)
        if (res.code !== 200) return
        this.$message.success('发布文章成功，等待后台管理员审核！')
        setTimeout(() => {
          this.$router.push('/blogs')
        }, 200)
      } else {
        // 编辑文章
        this.editArticleFrom.id = this.articleInfo.id
        this.editArticleFrom.title = this.articleInfo.title // 太难受了，因为字段不同的原因要每一项赋值，以匹配后端的参数，本来直接this.artcleInfo就可以
        this.editArticleFrom.content = this.articleInfo.content
        this.editArticleFrom.smallText = this.articleInfo.smallText
        this.editArticleFrom.categories = this.articleInfo.categories
        const { data: res } = await this.$http.post('/article/update', this.editArticleFrom)
        console.log('编辑文章')
        console.log(res)
        if (res.code !== 200) return
        this.$message.success('编辑文章成功！')
        setTimeout(() => {
          this.$router.push('/blogs')
        }, 200)
      }
    },
    // 获取所有分类
    async getClass () {
      const { data: res } = await this.$http.get('/class/getNameList')
      console.log('所有分类', res)
      if (res.code !== 200) return
      this.classList = res.data
      console.log('res.data', this.classList)
    },
    // 返回事件
    goBack () {
      this.$router.push('/blogs')
    }
  },

  created () {
    // 可以获取路由路径中的路径参数 blogId
    const blogId = this.$route.params.blogId
    if (blogId) {
      this.getArticle(blogId)
      this.isBuild = false
    } else {
      this.articleInfo = {}
      this.isBuild = true
    }
    this.getClass()
  }

}
</script>

<style lang="less" scoped>
.blogEdit_box {
  padding: 2% 5%;
  .el-page-header {
    margin-bottom: 3%;
  }
  .content_edit {
    z-index: 1;
    min-height: 600px;
  }
}
</style>
